<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul class="item-group">
      <li class="item" v-for="item of recommand" :key="item.id">
        <div class="item-img-wrapper">
          <img :src="item.imgurl" alt="" class="item-img" />
          <div class="desc">
            <div class="item-add">{{item.add}}</div>
            <span class="item-time">{{item.time}}</span>
          </div>
        </div>
        <div class="item-info">
          <h4>{{item.info}}</h4>
          <p>{{item.price}}</p>
        </div>
      </li>
    </ul>
    <div class="recommend-button">
        <router-link to="/">更多推荐</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recommand",
  props:['recommand'],
  data() {
    return {
      
    };
  },
};
</script>

<style lang="scss" scoped>
.recommend-title {
  margin-top: 10px;
  line-height: 40px;
  background-color: #eee;
  text-indent: 10px;
}
.item-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  .item {
    width: 49%;
    .item-img-wrapper {
      position: relative;
      img {
        max-width: 100%;
        border-radius: 5px;
      }
      .desc {
        display: inline-block;
        padding: 5px 15px;
        background-color: rgba($color: #000000, $alpha: 0.7);
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translateX(-50%);
        .item-add {
          color: #fff;
          font-size: 14px;
        }
        .item-time {
          color: #ffde00;
          font-size: 13px;
        }
      }
    }
    .item-info {
      padding: 5px;
      text-align: left;
      h4 {
        color: #000;
        margin: 0;
        font-weight: 400;
        font-size: 14px;
        padding-bottom: 3px;
      }
      p {
        color: #ff7400;
        margin: 0;
        font-weight: 600;
        font-size: 18px;
      }
    }
  }
}
</style>